<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="js/jquery.min.js"></script>
  <link rel="stylesheet" href="css/icheck-material.min.css">
  <script src="js/bootstrap.min.js"></script>
  <link href="css/default.css" rel="stylesheet">
  <title>登录页面</title>
  <style>
    #checkCode{
      width: 116px;
      margin-left: 30px;
      border: 1px solid black;
    }
  </style>
  <script>
    //验证码刷新函数
    function refreshCode(){
      document.getElementById("checkCode").src="codeImage?time="+new Date().getTime();
    }
    //文本框为空检验
    function checkLogin(){
      var username=$("#loginName").val()
      var password=$("#loginPass").val()
      var checkCode=$("#code").val()
      if (username==="" || password==="" || checkCode===""){
        if($("#loginShow").length>0){
          return false;
        }
        $("#form1").append("<div class=\"alert alert-info alert-dismissible\" id=\"loginShow\" style=\"margin-top: 10px;text-align: center\" role=\"alert\">\n" +
                "      <button type=\"button\" class=\"close\" data-dismiss=\"alert\" >\n" +
                "        <span>&times;</span></button>\n" +
                "      <strong id=\"loginMsg\">用户名或密码或验证码不为空！</strong>\n" +
                "    </div>")
        return false;
      }
      return true;
    }

  </script>
</head>
<body class="signin">
<%
  String remUserName="";
  String remUserPwd="";
  String remUserType="";
  String  value="false";
  Cookie[] cookies = request.getCookies();
  if(cookies.length>0){
    for (Cookie cookie : cookies) {
      if ("rememberUser".equals(cookie.getName())){
        remUserName=cookie.getValue().split("&")[0];
        remUserPwd=cookie.getValue().split("&")[1];
        remUserType=cookie.getValue().split("&")[2];
        value=cookie.getValue().split("&")[3];
      }
    }
    request.setAttribute("remState",value);
    request.setAttribute("remUserType",remUserType);
  }else {
    request.setAttribute("remState",value);
    request.setAttribute("remUserType",remUserType);
    return;
  }

%>
<section>

  <div class="panel panel-signin">
    <div class="panel-body">
      <br />
      <h4 class="text-center mb5">后台登录系统</h4>

      <div class="mb30"></div>

      <form id="form1" action="login.action" onsubmit="return checkLogin();" method="post">

        <div class="input-group mb15">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input type="text" class="form-control" id="loginName" value="<%=remUserName%>" placeholder="用户名" name="username">
        </div>

        <div class="input-group mb15">
          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
          <input type="password" class="form-control" id="loginPass" value="<%=remUserPwd%>" placeholder="密码" name="password">
        </div>

        <div class="input-group mb15">
          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
          <input type="text" class="form-control" maxlength="4" id="code" placeholder="验证码" name="checkCode" style="width: 130px">
          <a href="javascript:refreshCode()">
            <img src="codeImage" title="看不清点击刷新" id="checkCode" />
          </a>
        </div><!-- input-group -->


        <label for="reader" style="font-size: 14px">用户类型：</label>
        <c:choose>
          <c:when test="${remUserType=='1'}">
            <label class="icheck-material-cyan" style="margin-left: 15px">
              <input type="radio" id="reader" name="type" value="0" />
              <label for="reader">读者</label>
            </label>
            <label class="icheck-material-red" style="margin-left: 30px">
              <input type="radio" id="admin" name="type" value="1" checked/>
              <label for="admin">管理员</label>
            </label>
          </c:when>
          <c:otherwise>
            <label class="icheck-material-cyan" style="margin-left: 15px">
              <input type="radio" id="reader" name="type" value="0" checked />
              <label for="reader">读者</label>
            </label>
            <label class="icheck-material-red" style="margin-left: 30px">
              <input type="radio" id="admin" name="type" value="1" />
              <label for="admin">管理员</label>
            </label>
          </c:otherwise>
        </c:choose>

        <div class="clearfix">
          <div class="pull-left">
            <div class="icheck-material-purple">
              <c:choose>
                <c:when test="${remState=='false'}">
                  <input type="checkbox" id="rememberMe" name="rememberMe" value="1">
                  <label for="rememberMe">记住我</label>
                </c:when>
                <c:otherwise>
                  <input type="checkbox" id="rememberMe" name="rememberMe" value="1" checked>
                  <label for="rememberMe">记住我</label>
                </c:otherwise>
              </c:choose>
            </div>
          </div>
          <div class="pull-right">
            <button type="submit" class="btn btn-success">登录 <i class="fa fa-angle-right ml5"></i></button>
          </div>
        </div>

        <c:if test="${!empty msg}">
          <!-- 出错显示的信息框 -->
          <div class="alert alert-danger alert-dismissible" id="loginShow" style="margin-top: 10px" role="alert">
            <button type="button" class="close" data-dismiss="alert" >
              <span>&times;</span></button>
            <strong id="loginMsg">${msg}</strong>
          </div>
        </c:if>

      </form>

    </div>

    <div class="panel-footer">
      <a href="login.jsp" class="btn btn-primary btn-block">刷新</a>
    </div>
  </div>

</section>


</body>
</html>
